import React, { useState, useEffect } from "react";
import './App.css'
import Header from "./component/Header";
import List from "./component/List";
import Footer from "./component/Footer";
import { nanoid } from 'nanoid'
function App() {
  const [todoList, setTodoList] = useState(
    [
      { id: nanoid(), todo: '吃火锅', done: false },
      { id: nanoid(), todo: '吃火鸡面', done: false },
      { id: nanoid(), todo: '吃海鲜', done: false },
      { id: nanoid(), todo: '吃神户牛排', done: false },
    ]
  )

  useEffect(() => {
    // localStorage.setItem(key,value)  设置本地存储的数据
    // localStorage.getItem(key) 获取
    console.log(localStorage.getItem("todoList"));
    setTodoList(JSON.parse(localStorage.getItem("todoList")) || [])
  }, [])

  // 用于监视todoList 每当todoList更新之后 拿到数据进行本地存储
  useEffect(() => {
    localStorage.setItem('todoList', JSON.stringify(todoList))
    console.log(todoList);
  }, [todoList])


  return (
    <div id="root">
      <div className="todo-container">
        <div className="todo-wrap">
          <Header setTodoList={setTodoList} todoList={todoList} />
          <List todoList={todoList} setTodoList={setTodoList} />
          <Footer setTodoList={setTodoList} todoList={todoList} />
        </div>
      </div>
    </div>
  )

}

export default App;
